<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表展示</title>
    <link rel="icon" href="../static/image/f9.ico" type="image/x-icon">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="../static/css/show.css" type="text/css">
</head>
<body>
<div class="contain">
<!--    <div id="head">-->
<!--        <div id="logo">-->
<!--            <img src="../static/image/logo.jpg" width="40px" height="40px" alt="...">-->
<!--        </div>-->
<!--        <div id="title">-->
<!--            <p id="text">XXX科技有限公司后台管理系统</p>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div id="context">-->
<!--        <div id="left">-->
<!--            <div id="nave">-->
<!--                <a href="#">用户管理</a>-->
<!--            </div>-->
<!--            <div id="nave">-->
<!--                <a href="#">商品管理</a>-->
<!--            </div>-->
<!--            <div id="nave">-->
<!--                <a href="#">退货管理</a>-->
<!--            </div>-->
<!--            <div id="nave">-->
<!--                <a href="#"> 日志管理</a>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div id="right">-->
<!--            <div id="search">-->
<!--                <form class="navbar-form navbar-left" role="search">-->
<!--                    <div class="form-group">-->
<!--                        <input type="text" class="form-control"/>-->
<!--                    </div>-->
<!--                    <button type="submit" class="btn btn-default">搜索</button>-->
<!--                    <button type="button" class="btn btn-info"><a href="#">添加新用户</a></button>-->
<!--                </form>-->
<!--            </div>-->
            <div id="table">
                <table class="table table-bordered table-hover" style="text-align: center;">
                    <thead>
                    <tr>
                        <th>用户编号</th>
                        <th>用户名称</th>
                        <th>用户口令</th>
                        <th>出生日期</th>
                        <th>用户性别</th>
                        <th>用户薪资</th>
                        <th>联系电话</th>
                        <th>家庭住址</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="person : ${page.list}">
                        <td th:text="${person.id}"></td>
                        <td th:text="${person.username}"></td>
                        <td th:text="${person.password}"></td>
                        <td th:text="${#dates.format(person.birth,'yyyy-MM-dd')}"></td>
                        <td th:text="${person.sex}== true? '男':'女'"></td>
                        <td th:text="${person.salary}"></td>
                        <td th:text="${person.phone}"></td>
                        <td th:text="${person.address}"></td>
                        <td>
                            <button type="button" class="btn btn-warning">修改</button>&nbsp;&nbsp;
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="page">
                <ul class="pagination">
<!--首页-->
                    <li class="page-item"><a class="page-link" th:href="@{'/show?pageNum=1'}">首页</a></li>
                    <li class="page-item" th:if="${page.hasPreviousPage}"><a class="page-link"th:href="@{'/show?pageNum=' + ${page.prePage}}" th:text="上一页"></a></li>
                    <li class="page-item" th:each="pageNum:${#numbers.sequence(1, page.pages)}">
                        <a class="page-link" th:href="@{'/show?pageNum=' + ${pageNum}}" th:text="${pageNum}" th:if="${pageNum ne page.pageNum}"></a>
                        <a class="page-link" th:href="@{'/show?pageNum=' + ${pageNum}}" th:text="${pageNum}" th:if="${pageNum eq page.pageNum}" th:style="'font-weight:bold;background: #6faed9;'"></a>
                    </li>
                    <li class="page-item"  th:if="${page.hasNextPage}"><a class="page-link" th:href="@{'/show?pageNum=' + ${page.nextPage}}" th:text="下一页"></a></li>
                    <li class="page-item"><a class="page-link" th:href="@{'/show?pageNum=' + ${page.pages}}">尾页</a></li>
                </ul>
            </div>
        </div>
    </div>
<!--    <div id="footer">-->
<!--            <span>-->
<!--                <a href="#">站点信息</a></span> |-->
<!--        <span>-->
<!--                <a href="#">关于我们</a></span> |-->
<!--        <span>-->
<!--                <a href="#">用户反馈</a></span> |-->
<!--        <span>-->
<!--                <a href="#">在线帮助</a></span>-->
<!--        <div id="info">-->
<!--            <ul>-->
<!--                <li>电话：029-8895-2568</li>-->
<!--                <li>地址：中国&nbsp;|&nbsp;陕西</li>-->
<!--                <li>网址：http://www.baidu.com</li>-->
<!--                <li>邮箱地址：science and technology@163.com</li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
</div>
</body>
</html>